<template>
  <!-- 方案规划导航栏 -->
  <div style="height: 100%;z-index: 1;">
    
    
      <div style="position: absolute;left: 1.5vh;top: 2vh;" class="configBox"> 

        <div style="width: 95%;height: 20%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:30%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">方案库</div>
          <div style="width: 90%;height:60%;overflow-y: auto;margin: 2vh auto;text-align: left;margin-left: 7vh;">
            
            <el-radio-group v-model="checkScheme" @change="queryScheme()" style="display: grid;" size="small">
              <el-radio v-for="scheme in schemeLists"  :key="scheme.label" :label="String(scheme.label)"> 
                  {{scheme.value}}
              </el-radio>
            </el-radio-group>

          </div>
        </div>

        
        <div style="width: 95%;height: 46%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:35%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">设备选择</div>
          <div style="width: 90%;height:80%;margin: 1vh auto 2vh 1vh;text-align: center;">
            
            
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              电网：
              <el-radio-group v-model="form.isHavaDw" @change="schemeChange('dw')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>
            
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              光伏：
              <el-radio-group v-model="form.isHavaGf" @change="schemeChange('gf')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              风机：
              <el-radio-group v-model="form.isHavaFj" @change="schemeChange('fj')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              储电：
              <el-radio-group v-model="form.isHavaCd" @change="schemeChange('cd')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              储氢罐：
              <el-radio-group v-model="form.isHavaCqg" @change="schemeChange('cqg')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>


            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              燃料电池：
              <el-radio-group v-model="form.isHavaRldc" @change="schemeChange('rldc')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="2" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              储热：
              <el-radio-group v-model="form.isHavaCr" @change="schemeChange('cr')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="2" >无</el-radio> 
              </el-radio-group>
            </div>

      
          </div>
        </div>

        <div style="width: 95%;height: 20%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:35%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">配置目标</div>
          <div style="width: 107%;height:80%;margin: 0vh auto 0vh 0vh;text-align: left;text-align: center;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              <el-radio-group v-model="form.configureTarget" size="small" style="margin-top: 0.6vh;display: inline;">
                <el-radio label="1"><span style="font-size: 1vw;">经济性优先</span></el-radio>
                <el-radio label="2" ><span style="font-size: 1vw;">环保性优先</span></el-radio> 
                <el-radio label="3" ><span style="font-size: 1vw;">兼顾经济和环保</span></el-radio> 
              </el-radio-group>
            </div>
          </div>
        </div>

        
        
        <div style="width: 95%;margin: 1vh auto;text-align: center;">
          <el-button type="primary" @click="addScheme()">新增方案</el-button>
          <el-button type="primary" @click="saveScheme()">保存方案</el-button>
        </div>

      </div>
                


      <div id="areaDiv1" style="position: absolute;left:30vh;top: 11vh;" class="areaBox"> 
        
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/dw.png" />
          <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电网</div>
        </div>
        <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('dw')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
        </div>
      </div>
 
 
 
            
      <div id="areaDiv2" style="position: absolute;left:30vh;top: 22vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gf.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">光伏</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('gf')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>
 
    
    
      <div id="areaDiv3" style="position: absolute;left:30vh;top: 33vh;" class="areaBox"> 
         
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/fj.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">风机</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('fj')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>
      
      
      <div id="areaDiv4" style="position: absolute;left:30vh;top: 44vh;" class="areaBox"> 
         
         <div style="display: inline-flex;width: 100%;">
           <img class="imgClass" src="../../assets/images/cd.png" />
           <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储电</div>
         </div>
         <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('cd')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
     </div>
      <div id="anchorPoin-1" style="width: 1vh;height: 1vh;left: 44vh;top: 15.1vh;;float: right;position: absolute;;"></div>
      <div id="anchorPoin1" style="width: 1vh;height: 1vh;left: 55vh;top: 15.1vh;;float: right;position: absolute;"></div>

      <div id="lineDiv1" style="position: absolute;left: 55vh;top: 3vh;height: 92%;width: 0.5vh;background: #95ef8499;" ></div>

      <div id="anchorPoin-2" style="width: 1vh;height: 1vh;left: 44vh;top: 26vh;float: right;position: absolute;"></div>
      <div id="anchorPoin2" style="width: 1vh;height: 1vh;left: 55vh;top: 26vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-3" style="width: 1vh;height: 1vh;left: 44vh;top: 37.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin3" style="width: 1vh;height: 1vh;left: 55vh;top: 37.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-4" style="width: 1vh;height: 1vh;left: 44vh;top: 48vh;float: right;position: absolute;"></div>
      <div id="anchorPoin4" style="width: 1vh;height: 1vh;left: 55vh;top: 48vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin-22" style="width: 1vh;height: 1vh;left: 55vh;top: 5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin22" style="width: 1vh;height: 1vh;left: 153vh;top:5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-23" style="width: 1vh;height: 1vh;left: 55vh;top: 36vh;float: right;position: absolute;"></div>
      <div id="anchorPoin23" style="width: 1vh;height: 1vh;left: 67vh;top: 36vh;float: right;position: absolute;"></div>


      <div id="anchorPoin-5" style="width: 1vh;height: 1vh;left: 54.5vh;top: 12vh;float: right;position: absolute;"></div>
      <div id="anchorPoin5" style="width: 1vh;height: 1vh;left: 67vh;top: 12vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin6" style="width: 1vh;height: 1vh;left: 55vh;top: 48.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-6" style="width: 1vh;height: 1vh;left: 67vh;top: 48.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin7" style="width: 1vh;height: 1vh;left: 55vh;top: 61vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-7" style="width: 1vh;height: 1vh;left: 67vh;top: 61vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-8" style="width: 1vh;height: 1vh;left: 81vh;top: 12.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin8" style="width: 1vh;height: 1vh;left: 97vh;top: 12.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-9" style="width: 1vh;height: 1vh;left: 81vh;top: 24vh;float: right;position: absolute;"></div>
      <div id="anchorPoin9" style="width: 1vh;height: 1vh;left: 97vh;top: 24vh;float: right;position: absolute;"></div>

      <div id="anchorPoin24" style="width: 1vh;height: 1vh;left: 153vh;top: 24vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-10" style="width: 1vh;height: 1vh;left: 83vh;top: 34vh;float: right;position: absolute;"></div>
      <div id="anchorPoin10" style="width: 1vh;height: 1vh;left: 97vh;top: 34vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin11" style="width: 1vh;height: 1vh;left: 83vh;top: 38.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin12" style="width: 1vh;height: 1vh;left: 97vh;top: 38.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-12" style="width: 1vh;height: 1vh;left: 111vh;top: 38.6vh;float: right;position: absolute;"></div>

      <div id="anchorPoin13" style="width: 1vh;height: 1vh;left: 81vh;top: 48vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-13" style="width: 1vh;height: 1vh;left: 97vh;top: 48vh;float: right;position: absolute;"></div>

      <div id="anchorPoin14" style="width: 1vh;height: 1vh;left: 97vh;top: 16vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-14" style="width: 1vh;height: 1vh;left: 111vh;top: 16vh;float: right;position: absolute;"></div>

      <div id="anchorPoin15" style="width: 1vh;height: 1vh;left: 96.7vh;top: 51vh;float: right;position: absolute;"></div>

      <div id="anchorPoin16" style="width: 1vh;height: 1vh;left: 142.5vh;top: 57vh;;float: right;position: absolute;"></div>
      <div id="anchorPoin-16" style="width: 1vh;height: 1vh;left: 153vh;top: 57vh;;float: right;position: absolute;"></div>


      <div id="anchorPoin17" style="width: 1vh;height: 1vh;left: 129vh;top: 51.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin18" style="width: 1vh;height: 1vh;left: 143vh;top:51.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin19" style="width: 1vh;height: 1vh;left: 96.7vh;top: 43.8vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-19" style="width: 1vh;height: 1vh;left: 153vh;top: 43.8vh;float: right;position: absolute;"></div>

      <div id="anchorPoin20" style="width: 1vh;height: 1vh;left: 81vh;top: 60.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin21" style="width: 1vh;height: 1vh;left: 143vh;top: 60.5vh;float: right;position: absolute;"></div>


      <div id="areaDiv5" style="position: absolute;left: 67vh;top: 8vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/ldjc.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电解槽</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('djc')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      
      <div id="areaDiv6" style="position: absolute;left: 67vh;top: 20vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cqg.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储氢罐</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
            <el-link @click="dataMaintenance('cqg')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      
      <div id="areaDiv7" style="position: absolute;left: 67vh;top: 32vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rldc.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">燃料电池</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('rldc')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      
      
      <div id="areaDiv8" style="position: absolute;left: 67vh;top: 44vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rbjz.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">热泵</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('rb')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      <div id="areaDiv9" style="position: absolute;left: 67vh;top: 56vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dzl.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电制冷</div>
        </div>
        <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
        <el-link @click="dataMaintenance('dzl')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
        </div>
      </div>

      <div id="lineDiv2" style="position: absolute;left: 97vh;top: 9vh;height: 37%;width: 0.5vh;background: rgb(41 194 239 / 55%);" ></div>

      <div id="lineDiv3" style="position: absolute;left: 97vh;top: 37vh;height: 24%;width: 0.5vh;background: #FF0000;" ></div>

      <div id="areaDiv10" style="position: absolute;left: 111vh;top:12vh;width: 20vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gyfcq.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">工业副产氢</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('gyfcq')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      
      <div id="areaDiv11" style="position: absolute;left: 111vh;top: 33vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cr.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储热</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('cr')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      
      <div id="areaDiv12" style="position: absolute;left: 111vh;top: 47vh;width: 19vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/xsszlj.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">吸收式制冷</div>
          </div>
          <div style="margin-top: 0.2vh;width: 97%;text-align: right;">
          <el-link @click="dataMaintenance('xsszl')" style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);">数据维护</el-link>            
          </div>
      </div>

      <div id="lineDiv4" style="position: absolute;left: 143vh;top: 50vh;height: 19%;width: 0.5vh;background: #7030A0;" ></div>
      
      <div id="areaDiv13" style="position: absolute;left: 153vh;top: 1vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">电负荷</div>
          </div>
           
      </div>

      
      <div id="areaDiv14" style="position: absolute;left: 153vh;top: 19vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/yq.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">氢负荷</div>
          </div>
           
      </div>

      
      <div id="areaDiv15" style="position: absolute;left: 153vh;top:40vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">热负荷</div>
          </div>
          
      </div>

      
      <div id="areaDiv16" style="position: absolute;left: 153vh;top: 54vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/lfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">冷负荷</div>
          </div>
           
      </div>
 
      
      <!-- 弹窗 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogShowFlag" style="margin-top: 25vh;margin-left: 5vh;" width="120vh" align="left">
        <el-form ref="dataForm" :model="dataForm" label-width="150px" align="left" :inline="true">
            
          <el-form-item :label="label1" >
            <el-input v-model="dataForm.value1">
              <template slot="append">{{unit1}}</template>
            </el-input>
          </el-form-item>

          <el-form-item v-if="this.label2!=''" :label="label2">
            <el-input v-model="dataForm.value2">
              <template slot="append">{{unit2}}</template>
            </el-input>
          </el-form-item>
        
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="saveData()">保存</el-button>
          <el-button type="primary" @click="closeDialog()">取消</el-button>
        </div>
      </el-dialog>
   

  </div>
</template>

<script>


  export default {
    name: 'schemeSelection',
    
    beforeRouteLeave (to, from, next) {
       
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
       
        if(connRem){ 
       
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.connectionMaps.put(key,"");
          // this.$nextTick(function(){
          //   this.$jsPlumbObj.deleteConnection(connRem);  
          // });
        }

      }
      
      var connDivs = $(".jtk-connector");
      var endpointDivs = $(".jtk-endpoint");

      if(connDivs){
        for(var i = 0;i<connDivs.length;i++){
          var dom = connDivs[i];
          $(dom).remove();
        }
      }

      if(endpointDivs){
        for(var i = 0;i<endpointDivs.length;i++){
          var dom = endpointDivs[i];
          $(dom).remove();
        }
      }

      next();
    },
    data() {
      return {
        label1:"容量上限：",
        label2:"单位投资成本：",
        unit1:"kg",
        unit2:"元",
        form: {
          id:"",
          schemeName:"",
          checkScheme:"",
          isHavaDw: '1',
          isHavaGf: '1',
          isHavaFj: '1',
          isHavaCd : "1",
          isHavaCqg: '1',
          isHavaRldc: "1",
          isHavaCr : "1",
          configureTarget:"1", 
          electricityPurchaseLimit : "",
          electricitySalesCeiling : "",
          photovoltaicCapUp : "",
          photovoltaicUnitInvestCost : "", 
          fanCapUp : "",
          fanUnitInvestCost : "",
          electCellCapUp : "",
          electCellUnitInvestCost : "",
          elecStorageCapUp : "",
          elecStorageUnitInvestCost : "",
          hydrogenStorageCapUp : "", 
          hydrogenStorageUnitInvestCost : "",
          fuelCellCapUp : "",
          fuelCellUnitInvestCost : "",
          heatPumpCapUp : "", 
          heatPumpUnitInvestCost : "",
          electricRefrigeraCapUp : "",
          electricRefrigeraUnitInvestCost : "",
          heatStorageCapUp : "",
          heatStorageUnitInvestCost : "",
          absorptionRefrigeraCapUp : "",
          absorptionRefrigeraUnitInvestCost : "",
          hydrogenPurchaseLimit : "", 
        },
        schemeLists:[
          {label:"0",value:"暂无预设方案，请维护"}, 
        ],
        checkScheme : "",

        dataForm: {
          value1: '',
          value2: '', 
        },
        dataType : "",
        dialogTitle : "",
        dialogShowFlag : false,
        $jsPlumbObj : {},
        connectionMaps : {}, 
        connectionArr : []
      }
    },
    created() {
     
       
    },
    mounted: function() {
      this.connectionMaps = this.getMap();
      this.generateWorkFlow();

      this.querySchemeList();
    },
    methods: {  

      saveData : function(){

        var dataType = this.dataType;
        
        if(dataType=="dw"){
          this.form.electricityPurchaseLimit = this.dataForm.value1;
          this.form.electricitySalesCeiling = this.dataForm.value2;
        }else if(dataType=="gf"){
          this.form.photovoltaicCapUp = this.dataForm.value1;
          this.form.photovoltaicUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="fj"){
          this.form.fanCapUp = this.dataForm.value1;
          this.form.fanUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="cd"){
          this.form.elecStorageCapUp = this.dataForm.value1;
          this.form.elecStorageUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="djc"){
          this.form.electCellCapUp = this.dataForm.value1;
          this.form.electCellUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="cqg"){
          this.form.hydrogenStorageCapUp = this.dataForm.value1;
          this.form.hydrogenStorageUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="rldc"){
          this.form.fuelCellCapUp = this.dataForm.value1;
          this.form.fuelCellUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="rb"){
          this.form.heatPumpCapUp = this.dataForm.value1;
          this.form.heatPumpUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="dzl"){
          this.form.electricRefrigeraCapUp = this.dataForm.value1;
          this.form.electricRefrigeraUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="cr"){
          this.form.heatStorageCapUp = this.dataForm.value1;
          this.form.heatStorageUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="xsszl"){
          this.form.absorptionRefrigeraCapUp = this.dataForm.value1;
          this.form.absorptionRefrigeraUnitInvestCost = this.dataForm.value2;
        }else if(dataType=="gyfcq"){
          this.form.hydrogenPurchaseLimit = this.dataForm.value1; 
        }

        this.dialogShowFlag = false;
      },
      closeDialog : function(){
        this.dialogShowFlag = false;
      },
        

      querySchemeList : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/querySchemeList?project_id='+this.project_id+"&tableName=he_scheme_selection").then((res) => {
          var result = res.data;
        
          if(result){

            vm.checkScheme = result.checkScheme;
            vm.schemeLists = result.schemeLists;

            vm.queryScheme();
          }
        }).catch((error) => {
          console.log(error);
        });

      },

      queryScheme : function(){

        if(this.checkScheme!=0){

          var vm = this;

          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryScheme?schemeId='+this.checkScheme+"&tableName=he_scheme_selection").then((res) => {
            var result = res.data.data;

            if(result){
              vm.form = result;
              
              var color1 = "#6ba785";
              var color2 = "#4AA0D6"; 
              var color3 = "#FF0000";  

              var anchor = ['Right', 'Left'];

              if(vm.form.isHavaGf=="1"){
                $("#areaDiv2").show(100);
                vm.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color1,"");

              }else{
              
                var key = "anchorPoin-2_anchorPoin2";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");

                }

                $("#areaDiv2").hide(100); 
              }

              
              if(vm.form.isHavaFj=="1"){
                $("#areaDiv3").show(100); 

                setTimeout(function(){
                  vm.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,""); 
                },101);

              }else{
                $("#areaDiv3").hide(100);
                            
                var key = "anchorPoin-3_anchorPoin3";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }

              }

              
              if(vm.form.isHavaDw=="1"){
                $("#areaDiv1").show(100); 
                setTimeout(function(){
                  vm.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
                  vm.connectDiv("anchorPoin1","areaDiv1",anchor,"Straight",color1,"");
                },101);
              }else{
                $("#areaDiv1").hide(100);
                
                var key = "anchorPoin-1_anchorPoin1";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }
                var key = "anchorPoin1_areaDiv1";

                var connRem = vm.connectionMaps.get(key);

                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }
              }

              
              if(vm.form.isHavaCqg=="1"){
                $("#areaDiv6").show(100); 

                setTimeout(function(){
                  vm.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color1,"");
                  vm.connectDiv("anchorPoin9","anchorPoin-9",anchor,"Straight",color1,"");
                },101);
              
              }else{
                $("#areaDiv6").hide(100);
                  
                var key = "anchorPoin-9_anchorPoin9";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }
              
                var key = "anchorPoin9_anchorPoin-9";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);
                  vm.connectionMaps.put(key,"");
                }

              }



              
                
              if(vm.form.isHavaCd=="1"){
                $("#areaDiv4").show(100); 

                setTimeout(function(){
                  vm.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");
                  vm.connectDiv("anchorPoin4","anchorPoin-4",anchor,"Straight",color1,"");
                },101);
                

              }else{
                $("#areaDiv4").hide(100);
 
                var key = "anchorPoin-4_anchorPoin4";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }
            
                var key = "anchorPoin4_anchorPoin-4";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }

              }

              
              if(vm.form.isHavaCr=="1"){
                $("#areaDiv11").show(100); 


                setTimeout(function(){
                  vm.connectDiv("anchorPoin12","anchorPoin-12",anchor,"Straight",color3,"");
                  vm.connectDiv("anchorPoin-12","anchorPoin12",anchor,"Straight",color3,"");
                },101);

              }else{
                $("#areaDiv11").hide(100);
 
                var key = "anchorPoin12_anchorPoin-12";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);
                  vm.connectionMaps.put(key,"");  
                }
            
                var key = "anchorPoin-12_anchorPoin12";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
             
                }

              }

              
              if(vm.form.isHavaRldc=="1"){
                $("#areaDiv7").show(100); 
              
                setTimeout(function(){
                  vm.connectDiv("anchorPoin23","anchorPoin-23",anchor,"Straight",color1,"");
                  vm.connectDiv("anchorPoin10","anchorPoin-10",anchor,"Straight",color2,"");
                  vm.connectDiv("anchorPoin11","anchorPoin12",anchor,"Straight",color3,"");

                },101);
                
              }else{
                $("#areaDiv7").hide(100);
 
                  
                var key = "anchorPoin23_anchorPoin-23";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
              
                }
                  
                var key = "anchorPoin10_anchorPoin-10";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
           
                }
                  
                var key = "anchorPoin11_anchorPoin12";

                var connRem = vm.connectionMaps.get(key);
            
                if(connRem){ 
                  vm.$jsPlumbObj.deleteConnection(connRem);  
                  vm.connectionMaps.put(key,"");
                }


              }

              
            }


          }).catch((error) => {
            console.log(error);
          });

        }
          


      },

      addScheme : function(){
        
        var schemeLists = this.schemeLists;
        var maxNo = 0;
        var valueNo = "-1";

        if(schemeLists){
          for(var i = 0;i<schemeLists.length;i++){
            var value = schemeLists[i].value;
            var label = schemeLists[i].label;

            var num = value.replace(/[^\d]/g,' ');
            if(num>maxNo){
              maxNo = num;
            }
            if(label=="0"){
              valueNo = "0";
            }
          }
        }
        

        var scheme = {
          label:"0",
          value:"预设方案"+(parseInt(maxNo)+1)
        }

        this.$prompt('请输入方案名称', '提示', {
          confirmButtonText: '确定',
          inputValue: "预设方案"+(parseInt(maxNo)+1),
          cancelButtonText: '取消',
        }).then(({ value }) => {

          if(value!=null&&value!=""){
            
            if(valueNo!="0"){

              this.schemeLists.push(scheme);
              this.checkScheme = "0";

              this.form = {
                id:"",
                schemeName:"",
                checkScheme:"",
                isHavaDw: '1',
                isHavaGf: '1',
                isHavaFj: '1',
                isHavaCd : "1",
                isHavaCqg: '1',
                isHavaRldc: "1",
                isHavaCr : "1",
                configureTarget:"1", 
                electricityPurchaseLimit : "",
                electricitySalesCeiling : "",
                photovoltaicCapUp : "",
                photovoltaicUnitInvestCost : "", 
                fanCapUp : "",
                fanUnitInvestCost : "",
                electCellCapUp : "",
                electCellUnitInvestCost : "",
                elecStorageCapUp : "",
                elecStorageUnitInvestCost : "",
                hydrogenStorageCapUp : "", 
                hydrogenStorageUnitInvestCost : "",
                fuelCellCapUp : "",
                fuelCellUnitInvestCost : "",
                heatPumpCapUp : "", 
                heatPumpUnitInvestCost : "",
                electricRefrigeraCapUp : "",
                electricRefrigeraUnitInvestCost : "",
                heatStorageCapUp : "",
                heatStorageUnitInvestCost : "",
                absorptionRefrigeraCapUp : "",
                absorptionRefrigeraUnitInvestCost : "",
                hydrogenPurchaseLimit : "", 
              };

            }else{

              this.$message({
                type: 'info',
                message: '请先完成当前方案的维护操作！'
              });

            }
        

          }else{

            this.$message({
              type: 'info',
              message: '请输入方案名称'
            });   

            return;

          }


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });


      },

      saveScheme : function(){

        var vm = this;
        this.form.checkScheme = "1";
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/saveScheme', {
          "pageData": JSON.stringify(this.form),
          "tableName":"he_scheme_selection"
        }).then((res) => {

          if (res.data.flag) {
            vm.form.id = res.data.id;
            this.$message({
              type: 'success',
              message: res.data.message
            });

            vm.querySchemeList();

          } else {
            this.$message.error(res.data.message);
          }
        });

      },
      
      schemeChange : function(type){

        var vm = this;

        var color1 = "#6ba785";
        var color2 = "#4AA0D6"; 
        var color3 = "#FF0000";  

        var anchor = ['Right', 'Left'];

        if(type=="gf"){

          if(this.form.isHavaGf=="1"){
            $("#areaDiv2").show(1000);
            this.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color1,"");

          }else{
           
            var key = "anchorPoin-2_anchorPoin2";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }

            $("#areaDiv2").hide(1000);
            this.form.photovoltaicCapUp = "0";
            this.form.photovoltaicUnitInvestCost = "0"; 
          }

        }else if(type=="fj"){

          if(this.form.isHavaFj=="1"){
            $("#areaDiv3").show(1000); 

            setTimeout(function(){
              vm.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,""); 
            },1001);

          }else{
            $("#areaDiv3").hide(1000);
            this.form.fanCapUp = "0";
            this.form.fanUnitInvestCost = "0"; 
                        
            var key = "anchorPoin-3_anchorPoin3";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }

          }

        }else if(type=="dw"){

          if(this.form.isHavaDw=="1"){
            $("#areaDiv1").show(1000); 
            setTimeout(function(){
              vm.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
              vm.connectDiv("anchorPoin1","areaDiv1",anchor,"Straight",color1,"");
            },1001);
          }else{
            $("#areaDiv1").hide(1000);
            this.form.electricityPurchaseLimit = "0";
            this.form.electricitySalesCeiling = "0"; 
            
            var key = "anchorPoin-1_anchorPoin1";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
            var key = "anchorPoin1_areaDiv1";

            var connRem = this.connectionMaps.get(key);

            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
          }

        }else if(type=="cqg"){
      

          if(this.form.isHavaCqg=="1"){
            $("#areaDiv6").show(1000); 

            setTimeout(function(){
              vm.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color1,"");
              vm.connectDiv("anchorPoin9","anchorPoin-9",anchor,"Straight",color1,"");
            },1001);
           
          }else{
            $("#areaDiv6").hide(1000);

            this.form.hydrogenStorageCapUp = "0";
            this.form.hydrogenStorageUnitInvestCost = "0";
            
              
            var key = "anchorPoin-9_anchorPoin9";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
           
            var key = "anchorPoin9_anchorPoin-9";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }

          }


        }else if(type=="cd"){
          

          
          if(this.form.isHavaCd=="1"){
            $("#areaDiv4").show(1000); 

            setTimeout(function(){
              vm.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");
              vm.connectDiv("anchorPoin4","anchorPoin-4",anchor,"Straight",color1,"");
            },1001);
             

          }else{
            $("#areaDiv4").hide(1000);

            this.form.elecStorageCapUp = "0";
            this.form.elecStorageUnitInvestCost = "0";
            
              
            var key = "anchorPoin-4_anchorPoin4";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
         
            var key = "anchorPoin4_anchorPoin-4";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }

          }

    
        }else if(type=="cr"){
          
          if(this.form.isHavaCr=="1"){
            $("#areaDiv11").show(1000); 


            setTimeout(function(){
              vm.connectDiv("anchorPoin12","anchorPoin-12",anchor,"Straight",color3,"");
              vm.connectDiv("anchorPoin-12","anchorPoin12",anchor,"Straight",color3,"");
            },1001);

          }else{
            $("#areaDiv11").hide(1000);

            this.form.heatStorageCapUp = "0";
            this.form.heatStorageUnitInvestCost = "0";
            
              
            var key = "anchorPoin12_anchorPoin-12";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
        
            var key = "anchorPoin-12_anchorPoin12";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }

          }

        }else if(type=="rldc"){
          
          if(this.form.isHavaRldc=="1"){
            $("#areaDiv7").show(1000); 
           
            setTimeout(function(){
              vm.connectDiv("anchorPoin23","anchorPoin-23",anchor,"Straight",color1,"");
              vm.connectDiv("anchorPoin10","anchorPoin-10",anchor,"Straight",color2,"");
              vm.connectDiv("anchorPoin11","anchorPoin12",anchor,"Straight",color3,"");

            },1001);
            
          }else{
            $("#areaDiv7").hide(1000);

            this.form.fuelCellCapUp = "0";
            this.form.fuelCellUnitInvestCost = "0";
            
              
            var key = "anchorPoin23_anchorPoin-23";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
              
            var key = "anchorPoin10_anchorPoin-10";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }
              
            var key = "anchorPoin11_anchorPoin12";

            var connRem = this.connectionMaps.get(key);
        
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.connectionMaps.put(key,"");
            }


          }

        }

      },

      dataMaintenance:function(dataType){
        this.dataType = dataType;

        if(dataType=="dw"){
          this.label1 = "购电上限：";
          this.label2 = "售电上限：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";

        }else if(dataType=="gf"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="fj"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="cd"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kWh";
          this.unit2 = "元/kWh";
        }else if(dataType=="djc"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="cqg"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kg";
          this.unit2 = "元/kg";
        }else if(dataType=="rldc"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="rb"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="dzl"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="cr"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kWh";
          this.unit2 = "元/kWh";
        }else if(dataType=="xsszl"){
          this.label1 = "容量上限：";
          this.label2 = "单位投资成本：";

          this.unit1 = "kW";
          this.unit2 = "元/kW";
        }else if(dataType=="gyfcq"){
          this.label1 = "购氢上限：";
          this.label2 = "";
          this.unit1 = "kg";
          this.unit2 = "";
        }

        if(dataType=="dw"){
          this.dataForm.value1 = this.form.electricityPurchaseLimit;
          this.dataForm.value2 = this.form.electricitySalesCeiling;
        }else if(dataType=="gf"){
          this.dataForm.value1 = this.form.photovoltaicCapUp;
          this.dataForm.value2 = this.form.photovoltaicUnitInvestCost;
        }else if(dataType=="fj"){
          this.dataForm.value1 = this.form.fanCapUp;
          this.dataForm.value2 = this.form.fanUnitInvestCost;
        }else if(dataType=="cd"){
          this.dataForm.value1 = this.form.elecStorageCapUp;
          this.dataForm.value2 = this.form.elecStorageUnitInvestCost;
        }else if(dataType=="djc"){
          this.dataForm.value1 = this.form.electCellCapUp;
          this.dataForm.value2 = this.form.electCellUnitInvestCost;
        }else if(dataType=="cqg"){
          this.dataForm.value1 = this.form.hydrogenStorageCapUp;
          this.dataForm.value2 = this.form.hydrogenStorageUnitInvestCost;
        }else if(dataType=="rldc"){
          this.dataForm.value1 = this.form.fuelCellCapUp;
          this.dataForm.value2 = this.form.fuelCellUnitInvestCost;
        }else if(dataType=="rb"){
          this.dataForm.value1 = this.form.heatPumpCapUp;
          this.dataForm.value2 = this.form.heatPumpUnitInvestCost;
        }else if(dataType=="dzl"){
          this.dataForm.value1 = this.form.electricRefrigeraCapUp;
          this.dataForm.value2 = this.form.electricRefrigeraUnitInvestCost;
        }else if(dataType=="cr"){
          this.dataForm.value1 = this.form.heatStorageCapUp;
          this.dataForm.value2 = this.form.heatStorageUnitInvestCost;
        }else if(dataType=="xsszl"){
          this.dataForm.value1 = this.form.absorptionRefrigeraCapUp;
          this.dataForm.value2 = this.form.absorptionRefrigeraUnitInvestCost;
        }else if(dataType=="gyfcq"){
          this.dataForm.value1 = this.form.hydrogenPurchaseLimit; 
        }

        this.dialogTitle = "数据维护";
        this.dialogShowFlag = true;
      },

      
      getMap : function() {
        
        //初始化map_,给map_对象增加方法，使map_像Map
        var map_ = new Object();
        map_.put = function(key, value) {
            map_[key+'_'] = value;
        };
        map_.get = function(key) {
            return map_[key+'_'];
        };
        map_.remove = function(key) {
            delete map_[key+'_'];
        };
        map_.keyset = function() {
            var ret = "";
            for(var p in map_) {
                if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                    ret += ",";
                    ret += p.substring(0,p.length-1);
                }
            }
            if(ret == "") {
                return ret.split(",");
            } else {
                return ret.substring(1).split(",");
            }
        };
        return map_;
      },

      generateWorkFlow : function(){
 
         var color1 = "#6ba785";
         var color2 = "#4AA0D6"; 
         var color3 = "#FF0000"; 
         var color4 = "#460565"; 



          var anchor = ['Right', 'Left'];

          this.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin1","areaDiv1",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,"");

          
          this.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin4","anchorPoin-4",anchor,"Straight",color1,"");

          //
          this.connectDiv("anchorPoin-22","anchorPoin22",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-5","anchorPoin5",anchor,"Straight",color1,"");

          //
          this.connectDiv("anchorPoin23","anchorPoin-23",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin6","anchorPoin-6",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin7","anchorPoin-7",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-8","anchorPoin8",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color2,"");
          this.connectDiv("anchorPoin9","anchorPoin-9",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin10","anchorPoin-10",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin11","anchorPoin12",anchor,"Straight",color3,"");

          
          this.connectDiv("anchorPoin13","anchorPoin-13",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin-14","anchorPoin14",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin9","anchorPoin24",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin12","anchorPoin-12",anchor,"Straight",color3,"");
          this.connectDiv("anchorPoin-12","anchorPoin12",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin15","areaDiv12",anchor,"Straight",color3,"");

          //this.connectDiv("areaDiv9","anchorPoin16",anchor,"Straight",color4,"");

          this.connectDiv("anchorPoin17","anchorPoin18",anchor,"Straight",color4,"");

          this.connectDiv("anchorPoin16","anchorPoin-16",anchor,"Straight",color4,"");


          this.connectDiv("anchorPoin19","anchorPoin-19",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin20","anchorPoin21",anchor,"Straight",color4,"");

      },
    

 
    
      connectDiv : function(source,target,anchor,connector,stroke,label){
 

          var jsPlumbObj = this.getJsPlumb(stroke,connector);
  
          if(label){

              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", { width: 5, length: 5,  location: 1 }], 
                      label
                  ] 
              });

              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
            }else{
                          
              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor, 
                  overlays : [
                      ["Arrow", { width: 1, length: 1,  location: 1 }], 
                  ] 
              });

              
              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
          }

          window.addEventListener('resize', () => {
              jsPlumbObj.repaintEverything()
          })

          return jsPlumbObj;

      },
 

      
      getJsPlumb(lineColor,connector){
          
          var connectorValue = "Flowchart";

          if(connector!=null&&connector!=""){
              connectorValue = connector;
          }

          this.$jsPlumbObj = this.$jsPlumb;

          var jsPlumb = this.$jsPlumb.getInstance({

              ConnectionsDetachable   : false,//连接是否可以使用鼠标默认分离

              //  Endpoint:['Image', {
              //    src: 'static/images/def_endpoint.png',
              //  }] , // 端点的形状
              Anchor: "Continuous", 
              Endpoint : "Blank",//端点（锚点）的样式声明（Dot）
              EndpointStyle: { radius: 1, fill: "#FFFFFF" }, //端点默认样式
              PaintStyle: { stroke: lineColor, strokeWidth: 2  }, // 连线样式
              HoverPaintStyle: { stroke: lineColor }, // 默认悬停样式
              // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
              EndpointHoverStyle: { fill: lineColor }, // 端点悬停样式
              ConnectionOverlays: [
              [
                  "Arrow",
                  {
                      // 箭头
                      width:12,
                      length:12,
                      location: 1,
                      visible: true, 
                      // paintStyle: {
                      //     stroke: lineColor,
                      //     fill: lineColor
                      // }
                  }
                  
              ]
              ],
              Connector: [connectorValue, { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
              DrapOptions: { cursor: "crosshair", zIndex: 2000 },
              Scope: "jsPlumb_DefaultScope"
          });

          return jsPlumb;

      },
 

    }
  }
</script>

 

<style scoped>

.configBox{
  display: block;
  width: 27vh;
  height: 67vh;
  border-radius: 2vh;
  background-image: linear-gradient(to bottom, #2946ad, #61dde37a);
}

@import '../planProgram/style/tree.css';
  img{
    width: 70px;
  }
  td{
    position: relative;
  }
  .box1{
    position: relative;
    width: 100%;
    min-height: 90vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  /deep/ .el-dialog {
    background:rgba(40,54,121, 0.9);
    -webkit-box-sizing: border-box;
    border: none;

  }
  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background:#374590;
  }
  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/ .el-input.is-disabled .el-input__inner{
    background-color: #161E43;
    border-color: #161E43;
    color: #FFFFFF;
    text-align: left;
    cursor: not-allowed;
  } 



  /deep/ .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #f2f2f2;
      display: inline-block;
      font-size: inherit;
      height: 31px;
      line-height: 31px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }

.imgClass{
  vertical-align: middle;
  margin-top: 1vh;
  margin-left: 1vh;
  width: 4vh;
  height: 4vh;
}
 


.areaBox{
  display: block;
    width: 15vh;
    height: 9vh;
    text-align: left;
    border-radius: 12px;
    border: 1px solid #504ed557;
    background-image: -webkit-gradient(linear, left top, right top, from(#425bb5), to(#8ecd7e7a));
    background-image: linear-gradient(to right, #4274b5, #0f5d753d);
    cursor: pointer;
}

</style>
